<template>
    <div>
        <el-container>
            <BlogHead></BlogHead>
            <el-container class="content">
                <el-main>
                    <router-view></router-view>
                </el-main>
                <el-aside class="blog-right" width="400px">
                    <BlogRight></BlogRight>
                </el-aside>
            </el-container>
            <el-footer style="margin-top: 20px">
                <BlogFoot></BlogFoot>
            </el-footer>
        </el-container>
        <BackTop></BackTop>
    </div>
</template>

<script>
    import BlogHead from "../head/head"
    import BlogRight from "../right/right"
    import BlogFoot from "../foot/foot"
    import BackTop from "../backTop/backTop"

    export default {
        name: "index",
        components : {
            BlogHead,
            BlogRight,
            BlogFoot,
            BackTop,
        }
    }
</script>

<style>
    .content{
        width: 100%;
    }
    .content .el-main{
        overflow: visible;
        min-height: 550px;
        padding : 0px 10px;
        font-family: "Ubuntu", "Roboto", "Open Sans", "Microsoft YaHei", sans-serif;
        font-weight : 400;
        padding-top: 0px;
    }
    .blog-right{
    }
    #app .el-footer{
        margin: 0;
        padding: 0;
    }
</style>